@import "variables";
@import "mixins";

$grid-gutter-width: 28px;
$grid-container-width: 720px;


/*无固定宽度的容器*/
.container-fluid {
  position: relative;
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
  @include clearfix;
}

/*容器*/
.container {
  @extend .container-fluid;
  width: $grid-container-width;
}

.container-filled {
  @extend .container-fluid;
  @include absolute();
}

.row {
  margin-left: (($grid-gutter-width / -2));
  margin-right: (($grid-gutter-width / -2));
  @include clearfix;

  > [class*="col-"] {
    float: left;
    padding-left: (($grid-gutter-width / 2));
    padding-right: (($grid-gutter-width / 2));
    min-height: 1px;
  }
}
.row.half-gutter {
  margin-left: (($grid-gutter-width / -4));
  margin-right: (($grid-gutter-width / -4));

  > [class*="col-"] {
    padding-left: (($grid-gutter-width / 4));
    padding-right: (($grid-gutter-width / 4));
  }
}


//定义列
@mixin make-grid-columns($grid-columns, $gutter) {
  $list: "";
  @for $index from 1 through $grid-columns {
    $list: "#{$list}, .col-#{$index}";
    @include calc-grid-column($index, $grid-columns);
  }
}

//计算列宽
@mixin calc-grid-column($index, $grid-columns) {
  .col-#{$index} {
    width: percentage(($index / $grid-columns)) !important;
  }
  .col-offset-#{$index} {
    margin-left: percentage(($index / $grid-columns));
  }
}

/*定义列样式 .col-1 ~ .col-12*/
@include make-grid-columns(12, $grid-gutter-width);